<template>
	<div class="page pageFixed">
		<custom-box title="我的">
			<div class="grade_box">
				<div class="flex jlr">
					<div class="flex a-center">
						<div class="avatar"><img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></div>
						<div class="meber_info">
							<h4>欧阳倩倩</h4>
							<p>学号 (23476）</p>
						</div>
					</div>
					<div class="fen">
						<div class="fen_item flex a-center jlr">
							<div class="diamond"></div>
							<span>总积分</span>
							<h4>20000</h4>
						</div>
						<div class="fen_item on flex a-center jlr">
							<div class="diamond"></div>
							<span>今日积分</span>
							<h4>200</h4>
						</div>
					</div>
				</div>
				
				<div class="meber_body flex j-center">
					<div class="meber_body_item icon1" @click="$enter('/Ishop/Index')"></div>
					<div class="meber_body_item icon2" @click="enterTreasurechest()">
						<div class="badge">2</div>
					</div>
					<div class="meber_body_item icon3" @click="enterRecordShow()">
						<div class="badge">4</div></div>
					<div class="meber_body_item icon4" @click="enterAward()"></div>
				</div>
				<div class="button grade_submit" @click="exit">退出</div>
			</div>
		</custom-box>
	</div>
</template>
<script>
/*
@treasure成长宝箱
@record 我的记录
*/
export default {
	data(){
		return {
			
		}
	},
	methods:{
		enterTreasurechest(){//点击成长宝箱
			this.$emit('treasure')
		},
		enterRecordShow(){//点击我的记录
			this.$emit('record')			
		},
		enterAward(){//点击签到
			this.$emit('award')			
		},
		exit(){//点击退出
			this.$emit('exit')
		}
	},
	mounted() {
		
	}
}
</script>
<style scoped lang="scss">
	.grade_box{padding: .8rem .4rem .3rem .4rem;}
	.avatar{width: 1.12rem; height: 1.12rem; border-radius: 50%; overflow: hidden;}
	.avatar img{width: 100%; height: 100%;}
	.meber_info{flex: 1; padding-left: .32rem; font-size: .24rem; color: #B14D07;}
	.meber_info h4{font-size: .32rem; color: #B14D07; margin-bottom: .1rem; }
	.fen_item{width: 3.24rem; height: .68rem; border-radius: .34rem; background-color: #fff; border: 1px solid #4BC5FF; position: relative; padding-right: .2rem; padding-left: .6rem; font-size: .24rem; color: #353535;}
	.fen_item.on{background-color: #FFF6DA; border: 1px solid #F6B560; margin-top: .14rem; color: #B14D07;}
	.fen_item .diamond{width: .72rem; height: .61rem; background: url('../../assets/img/diamond.png'); background-size: 100% 100%; position: absolute; left: -.2rem; top: 50%; transform: translateY(-50%);}
	.fen_item.on .diamond{background: url('../../assets/img/diamond1.png'); background-size: 100% 100%;}
	.fen_item h4{font-size: .28rem;}
	.meber_body{padding-top: .8rem;}
	.meber_body_item{width: 1.81rem; height: 1.72rem; margin: 0px .1rem; flex-shrink: 0; position: relative;}
	.meber_body_item .badge{width: .46rem; height: .46rem; border-radius: 50%; position: absolute; right: 0; top: 0; background-color: #FF0000; font-size: .26rem; line-height: .46rem; color: #fff; text-align: center;}
	.meber_body_item.icon1{background: url('../../assets/img/meber01.png') no-repeat; background-size: 100% 100%;}
	.meber_body_item.icon2{background: url('../../assets/img/meber02.png') no-repeat; background-size: 100% 100%;}
	.meber_body_item.icon3{background: url('../../assets/img/meber03.png') no-repeat; background-size: 100% 100%;}
	.meber_body_item.icon4{background: url('../../assets/img/meber04.png') no-repeat; background-size: 100% 100%;}
	.grade_submit{position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.1rem;}
</style>